<template>
    <div>
        <center>
        用户名称: <el-input type="text" placeholder="请输入用户名" v-model="user.name"></el-input>
        <br>
        用户密码: <el-input type="password" placeholder="请输入用户密码" v-model="user.password"></el-input>
        <br>
        用户手机: <el-input type="text" placeholder="请输入用户手机" v-model="user.mobile"></el-input>
        <el-button @click="Getsms">发送验证码</el-button>
        <br>
        验证码: <el-input type="text" placeholder="请输入验证码" v-model="user.sms_code"></el-input>
        <br>
        用户金额: <el-input type="text" placeholder="请输入用户金额" v-model="user.money"></el-input>
        <br>
        <el-button @click="DoReg">注册</el-button>
        </center>
    </div>
</template>

<script>
export default {
    name: 'MyRegister',
    data() {
        return {
            user:{
                name:"",
                password:"",
                mobile:"",
                money:"",
                sms_code:""
            }
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {},

    methods: {
        Getsms(){
            this.axios.get('http://127.0.0.1:8000/register/'+this.user.mobile+'/')
            .then(res => {
                if(res.data.code == 200){
                    alert('短信验证码为'+res.data.sms_code)
                }else{
                    alert(res.data.msg)
                }
            })
            .catch(err => {
                alert(err)
            })
        },
        DoReg(){
            this.axios.post('http://127.0.0.1:8000/register/'+this.mobile+'/',{
                code:this.user.sms_code,
                name:this.user.name,
                password:this.user.password,
                mobile:this.user.mobile,
                money:this.user.money
            })
            .then(res => {
                alert(res.data.msg)
                if(res.data.code == 200){
                    this.$router.push('/login')
                }
            })
            .catch(err => {
                alert('该用户可能已经存在',err)
            })
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
* {
    margin: 0;
}
.el-input{
    width:30%;
}
</style>
